﻿@{
    ViewBag.Title = "Office Self Service";
}

<html>
<head>
    <title>SelfService</title>
    <meta charset="utf-8" name="viewport" content="width=device-width" />
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/1.0.1/fabric.min.css">
    <link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/1.0.1/fabric.components.min.css">
</head>
<body style="overflow: hidden;">

    <div class="ms-Grid ms-bgColor-themePrimary banner">
        <div id="topBar" class="ms-Grid-row">
            <div class="ms-Grid-col ms-u-sm12 ms-u-md12 ms-u-lg12 ms-u-xl12">
                <img class="ms-fontColor-white companyLogo " />
                <span class="ms-font-xl ms-fontColor-white companyName" style="font-weight: bold;">
                    CompanyLogo/Name
                </span>
                <span class="ms-font-xl banner-label ms-fontColor-white" style="font-weight: bold;">Office Self Service Deployment</span>
                <span id="btAbout" class="ms-font-xl ms-fontColor-white ms-Icon ms-Icon--question helpButton" onclick="showModal('helpModal')"></span>
            </div>
        </div>
    </div>

    <div id="banner" class="ms-Grid custom-banner">
        <div class="ms-Grid-row">
            <div class="ms-Grid-col ms-u-sm12 ms-u-md10 ms-u-lg6 ms-u-xl-6">
                <div class="banner-text">
                    <div class="ms-font-su">What's Office Self Service Deployment?</div>
                    <div class="ms-font-plus description">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur tempus malesuada condimentum. Duis eleifend, dolor at vehicula rhoncus, leo
                        nibh dapibus nisl, in faucibus orci ex sed metus. Proin ut erat in lectus mattis molestie. In cursus sit amet ipsum at sollicitudin. Duis quis
                        ipsum vitae purus pharetra facilisis nec ac nulla. Suspendisse sagittis convallis erat in cursus. Sed aliquet eget massa sed dignissim. Duis et placerat felis.
                    </div>
                </div>
                <button class="ms-button" onclick="focusDialog()"><span class="ms-Button-label ms-font-md ms-fontWeight-semibold"><i class="ms-Icon ms-Icon--arrowDown2"></i>Begin Searching</span></button>
            </div>
            <div class="ms-Grid-col ms-u-sm4 ms-u-smPush0 ms-u-md5 ms-u-mdPush1 ms-u-lg2  ms-u-xl2 ms-u-xlPull1">
                <img src="~/Content/imgs/illustration.png" />
            </div>
            <div class="ms-Grid-col ms-u-sm2 ms-u-smPush5 ms-u-md1  ms-u-lg2 ms-u-lgPush2 ms-u-xl2 ms-u-xlPush2">
                <i class="ms-Icon ms-Icon--x" onclick="toggleBanner()"></i>
            </div>
        </div>
    </div>

    <div id="mini-banner" class="custom-mini-banner hidden">
        <div class="ms-Grid">
            <div class="ms-Grid-row" style="padding:0px 10px 20px 0px;">
                <div class="ms-Grid-col ms-u-sm6 ms-u-smPush3  ms-u-md4 ms-u-mdPush4  ms-u-lg8 ms-u-lgPush2 ms-u-xl6 ms-u-xlPush3">
                    <div class="mini-banner-label ms-fontWeight-semibold">
                        What is the Office Self Service Deployment?
                    </div>
                    <div class="mini-banner-toggle ms-font-m-plus" onclick="toggleBanner()" >
                         Learn more about this tool for administrators
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="productModal" class="custom-Dialog" tabindex="1" style="width: 100%;">
        <div id="productContainer" class="ms-Grid custom-Dialog-main" style="width: 98%;">
            <div id="searchBar" class="ms-Grid-row">
                <div class="ms-Grid-col ms-u-sm12">
                    <div class="ms-Grid -header custom-header">
                        <div class="ms-Grid-row">
                            <div class="ms-Grid-col ms-u-sm12 ms-u-md12 ms-u-lg3 ms-u-xl2">
                                <p class="ms-font-xl">Select a Package</p>
                            </div>
                            <div class="ms-Grid-col ms-u-sm12 ms-u-md4 ms-u-mdPush0 ms-u-lg3 ms-u-lgPush0 ms-u-xl4">
                                <div id="outerSearchBox" class="ms-SearchBox ms-SearchBox-field custom-SearchBox">
                                </div>
                            </div>
                            <div class="ms-Grid-col ms-u-sm12 ms-u-md4 ms-u-mdPush0 ms-u-lg3 ms-u-lgPush0 ms-u-xl3">
                                <div class="ms-Dropdown">
                                    <i class="ms-Dropdown-caretDown ms-Icon ms-Icon--caretDown"></i>
                                    <select id="ddl-Location" class="ms-Dropdown-select"></select>
                                </div>
                            </div>
                            <div class="ms-Grid-col ms-u-sm12  ms-u-md4 ms-u-mdPush0 ms-u-lg3 ms-u-lgPush0 ms-u-xl2">
                                <div class="display-controls">
                                    <div id="listViewToggle" class="display-control-outer" onclick="isListView()">
                                        <i class="ms-Icon ms-Icon--listBullets  display-control-icon"></i>
                                    </div>
                                    <div id="tileViewToggle" class="display-control-outer" onclick="isTileView()">
                                        <i class="ms-Icon ms-Icon--tile display-control-icon"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div id="productList" class="ms-Grid-inner custom-Dialog-inner" style="overflow-y: auto; overflow-x: auto; width: 100%;">
                <div class="ms-Grid-row">
                    <div class="ms-Grid-col ms-u-sm12">

                    </div>
                </div>

                <div id="buildsGrid" class="ms-Grid-row">
                    @*BUILDS GO HERE*@
                </div>

                <div id="buildsTable" class="ms-Table" style="font-weight: bold; width: 90%">
                    @*BUILDS GO HERE*@
                </div>
            </div>
        </div>
    </div>

    <div id="primaryLanguageModal" class="custom-Dialog hidden" tabindex="1">
        <div class="custom-Dialog-main">
            <button class="-button custom-back-button" onclick="showModal('productModal')">
                <img class="ms-Icon ms-Icon--x" src="~/Content/imgs/Custom-Back-Arrow.png" />
                <span class="ms-font-l ms-fontWeight-regular">Back</span>
            </button>
            <div class="-header">
                <p class="-title ms-font-xl">Select A Primary Language</p>
                <hr />
            </div>
            <div class="-inner custom-Dialog-inner">
                <div id="primaryLanguagesGrid" class="ms-Grid ms-ChoiceFieldGroup">

                </div>
                <div class="-actions custom-Dialog-actions">
                    <div class="languagesContinue">
                        <button id="languageButton" class="-action ms-Button ms-Button--primary languages-button" onclick="setPrimaryLanguage()" disabled>
                            <span class="ms-Button-label">Continue</span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="languageModal" class="custom-Dialog hidden" tabindex="1">
        <div class="custom-Dialog-main">
            <button class="-button custom-back-button" onclick="showModal('primaryLanguageModal')">
                <img class="ms-Icon ms-Icon--x" src="~/Content/imgs/Custom-Back-Arrow.png" />
                <span class="ms-font-l ms-fontWeight-regular">Back</span>
            </button>
            <div class="-header">
                <p class="-title ms-font-xl">Select Additional Languages</p>
                <hr />
            </div>
            <div class="-inner custom-Dialog-inner">
                @*<div class="ms-Grid">*@
                <div id="languagesGrid" class="ms-Grid languagesGrid">

                </div>
                @*</div>*@
                <div class="-actions custom-Dialog-actions">
                    <div class="languagesContinue">
                        <button id="languageButton" class="-action ms-Button ms-Button--primary languages-button" onclick="setLanguage()">
                            <span class="ms-Button-label">Continue</span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="confirmationModal" class="custom-Dialog hidden" tabindex="1">

        <div class="custom-Dialog-main">
            <button class="-button custom-back-button" onclick="showModal('languageModal')">
                <img class="ms-Icon ms-Icon--x" src="~/Content/imgs/Custom-Back-Arrow.png" />
                <span class="ms-font-l ms-fontWeight-regular">Back</span>
            </button>
            <div class="-header">
                <p class="-title ms-font-xl">Lets make sure you're getting what you need...</p>
                <hr />
            </div>
            <div class="ms-Grid -inner confirmation-Dialog-inner">
                <div id="errorMessage" class="ms-Dialog ms-Dialog--lgHeader hidden">
                    <div class="ms-Overlay"></div>
                    <div class="ms-Dialog-main">
                        <div class="ms-Dialog-header">
                            <div class="ms-Dialog-title ms-font-xl-plus">
                                <i class="ms-Icon ms-Icon--x close-dialog" onclick="closeDialog()"></i>
                                Something went wrong...
                            </div>
                        </div>
                        <div class="ms-Dialog-inner">
                            <div id="errorText" class="ms-Dialog-content ms-font-l">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="ms-Grid-row">
                    <div class="ms-Grid-col ms-u-sm8 ms-u-smPush1 ms-u-md8 ms-u-mdPush3 ms-u-lg10  ms-u-lgPush2 ms-u-xl8 ms-u-xlPush4">
                        <p class="ms-font-m-plus">
                            Here's what you are about to download. If this is correct please click the <b>Install</b> button to proceed downloading
                        </p>
                    </div>
                </div>
                <div class="ms-Grid-row">
                    <div class="ms-Grid-col ms-u-sm12 ms-u-smPush0 ms-u-md12 ms-u-mdPush1 ms-u-lg12 ms-u-lgPush1 ms-u-xl10 ms-u-xlPush2">
                        <div class="confirmation-information">
                            <div class="ms-Grid-row">
                                <div class="ms-Grid-col ms-u-sm3 ms-u-smPush1 ms-u-md2 ms-u-mdPush1 ms-u-xl2confirmationField">
                                    <p class="ms-font-l">Office Version:</p>
                                </div>
                                <div class="ms-Grid-col ms-u-sm4 ms-u-smPush1  ms-u-md3 ms-u-mdPush2 ms-u-xl2 ms-u-xlPush1 confirmationField">
                                    <p id="versionSpan" class="ms-font-l"></p>
                                </div>
                            </div>
                            <div class="ms-Grid-row">
                                <div class="ms-Grid-col  ms-u-sm3 ms-u-smPush1  ms-u-md2 ms-u-mdPush1 confirmationField">
                                    <p class="ms-font-l">Product Package:</p>
                                </div>
                                <div class="ms-Grid-col ms-u-sm4 ms-u-smPush2  ms-u-md3 ms-u-mdPush2 ms-u-xl2 ms-u-xlPush1 confirmationField">
                                    <p id="productSpan" class="ms-font-l"></p>
                                </div>
                            </div>
                            <div class="ms-Grid-row">
                                <div class="ms-Grid-col  ms-u-sm3 ms-u-smPush1 ms-u-md2 ms-u-mdPush1 confirmationField">
                                    <p class="ms-font-l">Languages:</p>
                                </div>
                                <div class="ms-Grid-col  ms-u-sm6 ms-u-smPush3 ms-u-md7 ms-u-mdPush2 ms-u-lg8 ms-u-lgPush1 ms-u-xl8 ms-u-xlPush1">
                                    <p id="languageSpan" class="ms-font-l">

                                    </p>
                                </div>
                            </div>
                            <div class="-actions confirmationActions">
                                <div>
                                    <button id="installOffice" class="-action ms-Button ms-Button--primary" onclick="generateXML()">
                                        <span class="ms-Button-label">Install</span>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="downloadModal" class="custom-Dialog hidden" tabindex="1">

        <div class="custom-Dialog-main">
            <button class="-button custom-back-button" onclick="showModal('confirmationModal')">
                <img class="ms-Icon ms-Icon--x" src="~/Content/imgs/Custom-Back-Arrow.png" />
                <span class="ms-font-l ms-fontWeight-regular">Back</span>
            </button>
            <div class="-header">
                <p class="-title ms-font-xl">You're all set! Your download will begin shortly...</p>
                <hr />
            </div>
            <div class="-inner custom-Dialog-inner">
                <p class="ms-font-l">
                    If your download doesn't start after 10 seconds please download Office <a id="directDL"></a> .
                </p>
            </div>
        </div>
    </div>

    <div id="helpModal" class="custom-Dialog hidden" tabindex="1">

        @Html.Partial("~/Views/SHared/_help.cshtml")
    </div>

    <script type="text/javascript" src="./Scripts/vkbeautify.0.99.00.beta.js"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.8.0/highlight.min.js"></script>
    <script src="//code.jquery.com/jquery-2.1.4.js"></script>
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
</body>
</html>

